<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>日程列表</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }
        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
        }
        body > .el-container {
            margin-bottom: 40px;
        }
        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }
        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-container>
            <el-main>
                <el-card>
                    <el-button type="primary"  icon="el-icon-circle-plus-outline" style="float: left;background-color:#FFC200;border-color: #ffffff" @click="v.addSchedule()" v-loading.fullscreen.lock="fullscreenLoading">添加日程</el-button>
                    <el-table
                            :data="tableData.filter(data => !search ||
                             data.scheduleContent.toLowerCase().includes(search.toLowerCase())||
                             data.startTime.toLowerCase().includes(search.toLowerCase()))||
                             data.endTime.toLowerCase().includes(search.toLowerCase())||
                             data.reminderTime.toLowerCase().includes(search.toLowerCase())"
                            style="width: 100%"
                            height="500">
                        <el-table-column
                                label="日志内容"
                                prop="scheduleContent">
                        </el-table-column>
                        <el-table-column
                                label="开始日期"
                                prop="startTime">
                        </el-table-column>
                        <el-table-column
                                label="结束日期"
                                prop="endTime">
                        </el-table-column>
                        <el-table-column
                                label="提醒日期"
                                prop="reminderTime">
                        </el-table-column>

                        <el-table-column
                                align="right">
                            <template slot="header" slot-scope="scope">
                                <el-input
                                        v-model="search"
                                        size="mini"
                                        placeholder="输入关键字搜索"></el-input>
                            </template>
                            <!--scope可以获取一个范围里的内容-->
                            <template slot-scope="scope">
                                <el-button type="primary"
                                           round
                                           plain
                                           style="background-color:#FFC200;border-color: #ffffff;color: #ffffff"
                                           @click="dialogFormVisible = true;v.id=scope.row.scheduleId;getOldSchedule(v.id)">修改</el-button>
                                <el-dialog title="日志信息修改" :visible.sync="dialogFormVisible" style="font-weight: bold;text-align: center">
                                    <el-form :model="scheduleDTO">
                                        <el-form-item label="日志内容" :label-width="formLabelWidth" style="font-weight: bold">
                                            <el-input
                                                    type="textarea"
                                                    :autosize="{minRows:5,maxRows:50}"
                                                    show-word-limit
                                                    maxlength="1000"
                                                    v-model="scheduleDTO.scheduleContent"
                                                    resize="none"
                                                    name="scheduleContent"
                                                    class="textarea"
                                                    wrap="hard"
                                                    clearable></el-input>
                                        </el-form-item>
                                        <el-form-item label="开始日期-结束日期:" :label-width="formLabelWidth" style="font-weight: bold">
                                            <el-date-picker
                                                    v-model="scheduleDTO.time"
                                                    type="datetimerange"
                                                    range-separator="至"
                                                    value-format="yyyy-MM-dd HH:mm:ss"
                                                    name="startTime"></el-date-picker>
                                        </el-form-item>
                                        <el-form-item label="提醒日期(必填):" :label-width="formLabelWidth" style="font-weight: bold">
                                            <el-date-picker
                                                    v-model="scheduleDTO.reminderTime"
                                                    type="datetime"
                                                    value-format="yyyy-MM-dd HH:mm:ss"
                                                    placeholder="选择日期"
                                                    name="reminderTime"></el-date-picker>
                                        </el-form-item>
                                    </el-form>
                                    <div class="dialog-footer" style="text-align: center;margin: 0 auto">
                                        <el-button @click="info('取消修改');dialogFormVisible = false">取消修改</el-button>
                                        <el-button type="primary" @click="alterSchedule(v.id)" style="background-color:#FFC200;border-color: #ffffff">确定修改</el-button>
                                    </div>
                                </el-dialog>
                                <el-button
                                        round
                                        style="background-color:#f00;border-color: #fff;color: #fff"
                                        @click="v.id=scope.row.scheduleId;v.open()">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>

            </el-main>

        </el-container>
    </div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!--引入axios框架文件-->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script>
    let v = new Vue({
        el: "#app",
        data: function () {
            return {
                // 获取返回的shceduleList列表用于展示
                tableData: [],
                //搜索内容
                search: '',
                //修改框可见与不可见属性
                dialogTableVisible: false,
                dialogFormVisible: false,
                formLabelWidth: '150px',
                //封装前端的DTO传递给后端的JS对象
                scheduleDTO:{
                    scheduleContent:"",
                    time:[],
                    reminderTime:""
                },
                //用于获取对应的scheduleId
                id:"",
                fullscreenLoading : false,
                 // user:localStorage.getItem('user')?JSON.parse(localStorage.user):null
                user:{
                    userId:""
                }
            }
        },
        methods: {
            // 1，添加日程内容
            addSchedule(){
                v.fullscreenLoading = true;
                setTimeout(() => {
                    v.fullscreenLoading = false;
                    location.href="addschedule.html";
                }, 2000);
            },
            // 2，根据获取的id删除一条日程内容
            deleteSchedule(id){
                axios.delete("/schedule/deleteById/"+id+"/delete").then(function (response){
                    for (let i = 0; i < v.tableData.length; i++) {
                        if(id == v.tableData[i].scheduleId){
                            v.tableData.splice(i,1);
                        }
                    }

                })
            },
            // 3，根据id修改一条日程内容
            alterSchedule(id){
                console.log(v.scheduleDTO.reminderTime)
                if(v.scheduleDTO.reminderTime == '已提醒'){
                    v.alertsNoTime();
                    return;
                }
                const timestamp = new Date(v.scheduleDTO.reminderTime).getTime();
                const currentTime = new Date().getTime();
                if (timestamp <= currentTime) {
                    v.alerts();
                    return;
                }
                const delay = timestamp - currentTime;
                console.log(delay);
                setTimeout(() => {
                    location.reload();
                }, delay);
                axios.put("/schedule/alertSchedule/"+id+"/alter",v.scheduleDTO).then(function (resopnse){
                    // location.reload();
                    for (let i = 0; i < v.tableData.length; i++) {
                        if(id == v.tableData[i].scheduleId){
                            v.tableData[i].scheduleContent = resopnse.data.data.scheduleContent;
                            v.tableData[i].startTime = resopnse.data.data.startTime;
                            v.tableData[i].endTime = resopnse.data.data.endTime;
                            v.tableData[i].reminderTime = resopnse.data.data.reminderTime;
                            v.successMsg('修改成功');
                            v.dialogFormVisible=false;
                        }
                    }
                })
            },
            // 4，根据id获取一条内容内容
            getOldSchedule(id){
                for(let i=0;i<v.tableData.length;i++){
                    if(id == v.tableData[i].scheduleId){
                        v.scheduleDTO.scheduleContent = v.tableData[i].scheduleContent;
                        v.scheduleDTO.time[0] = v.tableData[i].startTime;
                        v.scheduleDTO.time[1] = v.tableData[i].endTime;
                        v.scheduleDTO.reminderTime = v.tableData[i].reminderTime;
                    }
                }
            },
            reminder(title,msg){
                this.$notify({
                    title: title,
                    message: msg,
                    type: 'success',
                    duration: 0
                })
            },
            successMsg(msg){
                this.$message({
                    message: msg,
                    type: 'success'
                });
            },
            info(title){
                this.$message(title);
            },
            open() {
                this.$confirm('此操作将永久删除该条日程记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center:true
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!',
                        options:v.deleteSchedule(v.id)
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            alerts() {
                this.$alert('您所选择的提醒时间点已经是过去时了，无法进行选择', '提示信息', {
                    confirmButtonText: '确定'
                });
            },
            alertsNoTime() {
                this.$alert('您未选择有效的提醒时间点', '提示信息', {
                    confirmButtonText: '确定'
                });
            }
        },
        created: function () {
            // this.user = localStorage.getItem('user')?JSON.parse(localStorage.user):null;
            this.user.userId = 2;
            let userId = this.user.userId;
            // 5，在页面加载时根据showList请求获取数据库的一组数据进行展示
            axios.get("/schedule/showList/"+userId+"/getUserScheduleList").then(function (response) {
                v.tableData = response.data.data;
                // 6,到点提示功能
                for (let i=0;i<v.tableData.length;i++){
                    if(v.tableData[i].reminderTime != null){
                        let reminderTime = new Date(v.tableData[i].reminderTime);
                        let timeDiff;
                        console.log(v.tableData[i].reminderTime);
                        if(v.tableData[i+1] !=undefined){
                            if(v.tableData[i].reminderTime == v.tableData[i+1].reminderTime){
                                timeDiff = reminderTime.getTime() - (Date.now()+1000);
                            }else{
                                timeDiff = reminderTime.getTime() - Date.now();
                            }
                        }else {
                            timeDiff = reminderTime.getTime() - Date.now();
                        }
                        setTimeout(() => {
                            v.scheduleDTO.scheduleContent=v.tableData[i].scheduleContent;
                            v.scheduleDTO.time[0] = v.tableData[i].startTime;
                            v.scheduleDTO.time[1] = v.tableData[i].endTime;
                            v.scheduleDTO.reminderTime = null;
                            axios.put("/schedule/alertSchedule/"+v.tableData[i].scheduleId+"/alter",v.scheduleDTO).then(function (resopnse){
                                v.tableData[i].reminderTime='已提醒';
                            })
                            v.reminder('提醒内容：'+v.tableData[i].scheduleContent,'提醒时间：'+v.tableData[i].reminderTime);
                        },timeDiff);
                    }else{
                        v.tableData[i].reminderTime = '已提醒';
                    }
                }
            })
        }
    })
</script>
</html>